<template>
  <h1>指令</h1>
  <f-input v-model:value="modelCode" class="w200" @change="handleChange" />
  <f-input v-model:value="modelCodeFirst" v-firstLetters="modelCode" class="w200" />
  <f-button v-model:value="modelCode" class="w200" v-loading="loading2" @click="changeLoading2"
    >loading</f-button
  >
  <f-button v-model:value="modelCode" class="w200" @click="changeLoading">loading</f-button>
  <!-- <span v-firstLetters="modelCode" class="b"></span> -->
  <span :innerHTML="modelCode" />
  <div class="111" v-watermark="{ text: ['水印指令|watermark'] }">
    <div ref="box" class="box">
      {{ modelCode }}
      {{ modelCodeFirst }}
      <div ref="box2" class="box2"></div>
    </div>
    {{ rule }}
    <!-- <f-input class="w200" v-ruleGenerate="{ orgId: '-1', code: 'bizType' }" placeholder="自动生成业务编码" /> -->
    <f-input
      v-model:value="modelCodeRule"
      class="w200"
      v-ruleGenerate="rule"
      placeholder="自动生成业务编码" />
    <f-button @click="modelCodeRule = null" v-power="'a'">清空</f-button>
    {{ modelCodeRule }}
    <a @click="modelCodeRule = null" v-power="'bb'">power-a</a>
    <span @click="modelCodeRule = null" v-power>power-span</span>
  </div>
  <div>
    <img src="upload/20240827/df247dc4321e446fa6c944131686ba2b.svg" v-imgError class="w40 h40" />
    <img src="1839990368828751872" v-imgGive v-imgViewer class="w80 h80" />
    <img src="1840017495888330752" v-imgGive v-imgViewer class="w80 h80" />
    <img src="1840017590503440384" v-imgGive v-imgViewer class="w80 h80" />
    <img src="upload/20240819/f8100cfb7f924a1188993d934d70779e.png" v-imgGive v-imgViewer class="w80 h80" />
    <!-- <f-image src="http://172.16.88.7:81/minio-upload/file/getfilesbyidorurl?url=upload/20240819/f8100cfb7f924a1188993d934d70779e.png" :width="40" /> -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

import { setLoading } from '../../packages/directive';

const modelCodeRule = ref();
// const modelCodeRule = ref('A00000001');
const rule = ref({ orgId: '-1', code: 'BEHINDMETHOD' });
const modelCode = ref('来来来');
const modelCodeFirst = ref('ZZZ');
const loading = ref(false);
const loading2 = ref(false);
const loadingText = ref('玩命加载中...');
const box = ref();
const box2 = ref();

const handleChange = (e) => {
  console.log('handleChange', modelCode.value, e.target.value);
};
const changeLoading = () => {
  loading.value = !loading.value;
  setLoading(loading.value, box.value, loadingText.value);
};
const changeLoading2 = () => {
  loading2.value = !loading2.value;
  setLoading(loading2.value, box2.value, '加载中....');
};

setTimeout(() => {
  rule.value.code = 'bizType';
  modelCodeRule.value = 'A00000002';
}, 1000 * 6);
</script>

<style lang="scss">
.box {
  height: 300px;
  width: 300px;
  border: 1px solid #a00;
}
.box2 {
  height: 100px;
  width: 100px;
  border: 1px solid #0a0;
}
</style>
